<template>
  <div>
    <div   class="backgroundstyle">
      <div   class="backBtn" @click="$router.back(-1)">
        <i  class="icon iconfont icon-back"></i>
      </div>
      <div  class="bgLayer">
        <img  src="/static/img/img_vip.jpg">
      </div>
      <div  class="vipfoot">
        <div  class="left">
          <span >超值价</span><span  class="strong">{{nowPrice}}</span><span >元/年</span>
        </div>
        <div  class="right" @click="goRechargeFn">
          <span >立即开通</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MemberPriceUrl,JifenUnifiedOrder,JifenNotify,JifenOrderQuery,ConfigJs } from "@/api/login";
import { Toast } from 'vant';
export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
	  datalist: [],
	  page:1,
	pageSize:100,
	traderType:"",
	cityId:"",
	orderNum:false,
	Latitude:"",
  Longitude:"",
  nowPrice:0
    };
  },
  created() {
    this.getConfig();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      MemberPriceUrl().then(res => {
        console.log(res);
        if (res.data.errCode == 0) {
          this.datalist = res.data.data;
          if(res.data.data && res.data.data.length>0){
            res.data.data.map((item)=>{
              if(item.memberType && item.memberType == 1){
                this.nowPrice = item.price;
              }
            });
          }
        }
      });
    },
    goRechargeFn(){
      console.log(999);
        JifenUnifiedOrder().then(res=>{
          console.log(res);
          if(res.data.errCode == 0){
            this.payinfo=res.data.data;
            this.pay()
          }
        });
    },
    pay(){
        console.log(this.payinfo);
        if(this.payinfo && this.payinfo.timeStamp){
            let that=this
            wx.chooseWXPay({
                appId:'wx9b4743a1848616d3',      
                timestamp: this.payinfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: this.payinfo.nonceStr, // 支付签名随机串，不长于 32 位
                package: this.payinfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: this.payinfo.paySign, // 支付签名
                success: function (res) {
                    // 支付成功后的回调函数
                    console.log(res);
                    that.orderQuery();
                },
                cancel: function(res) {
                    console.log(res);
                },
                fail:function(res){
                    console.log(res);
                    //支付失败
                }
            });
        } else {
            Toast('获取支付信息失败,请重试');
        }
     
    },
    getConfig(){
      ConfigJs(window.location.href).then((res)=>{
          console.log(res);
        let data=res.data.data
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
      })
    },
    OrderQuery(){
        var _this = this;
      JifenOrderQuery(this.payinfo.outNo).then(res=>{
          console.log(res);
           if (res.data.data!='支付成功'){
                setTimeout(function(){
                    _this.OrderQuery()
                },2000);
            }else{
                //Toast(res.data.data);
                //this.$router.push('/my')
           }
           setTimeout(function(){
                this.$router.push('/my')
            },4000);
           
      })
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.backgroundstyle {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #000002;
}
.backBtn {
    width: 1.25rem;
    height: 1.25rem;
    background: -webkit-gradient(linear,left top,right top,from(rgba(0,170,255,.5)),to(rgba(0,133,255,.5)));
    background: linear-gradient(90deg,rgba(0,170,255,.5),rgba(0,133,255,.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: fixed;
    top: .44rem;
    left: .44rem;
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.backBtn i {
    font-size: .64rem;
    font-weight: 700;
    color: #fff;
}
.bgLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bgLayer img {
    width: 100%;
}
.vipfoot {
    background: -webkit-gradient(linear,left top,right top,from(#d5b9af),to(#df9618));
    background: linear-gradient(90deg,#d5b9af,#df9618);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.42rem;
    overflow: hidden;
}
.left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 65%;
    height: 1.42rem;
    float: left;
}
.left span {
    font-size: .6rem;
    text-align: center;
    color: #412100;
}
.left span {
    font-size: .6rem;
    text-align: center;
    color: #412100;
}
.left span.strong {
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    color: #0e0300;
}
.left span {
    font-size: .6rem;
    text-align: center;
    color: #412100;
}
.right {
    width: 30%;
    height: inherit;
    background: -webkit-gradient(linear,left top,right top,from(#2a2016),to(#1b1515));
    background: linear-gradient(90deg,#2a2016,#1b1515);
    float: right;
}
.right span {
    font-size: .4rem;
    background: -webkit-gradient(linear,left top,right top,from(#d5b9af),to(#df9618));
    background: linear-gradient(90deg,#d5b9af,#df9618);
    -webkit-background-clip: text;
    color: transparent;
    width: 100%;
    height: 1.42rem;
    line-height: 1.42rem;
    display: block;
}
</style>
